<template>

  <!--Begin Login Begin-->
  <div class="log_bg">  
    <div class="top">
      <div class="logo"><router-link to="/"><img src="@/assets/images/logo.png" /></router-link></div>
    </div>
    <div class="login">
      <div class="log_img"><img src="@/assets/images/l_img.png" width="611" height="425" /></div>
      <div class="log_c">
        <form @submit.prevent="handleLogin">
          <table border="0" style="width:370px; font-size:14px; margin-top:30px;" cellspacing="0" cellpadding="0">
            <tbody>
              <tr height="50" valign="top">
                <td width="55">&nbsp;</td>
                <td>
                  <span class="fl" style="font-size:24px;">登录</span>
                  <span class="fr">还没有商城账号，<router-link to="/register" style="color:#ff4e00;">立即注册</router-link></span>
                </td>
              </tr>
              <tr height="70">
                <td>用户名</td>
                <td><input type="text" v-model="loginData.username" class="l_user" /></td>
              </tr>
              <tr height="70">
                <td>密&nbsp; &nbsp; 码</td>
                <td><input type="password" v-model="loginData.password" class="l_pwd" /></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td style="font-size:12px; padding-top:20px;">
                  <span style="font-family:'宋体';" class="fl">
                    <label class="r_rad"><input type="checkbox" v-model="loginData.rememberMe" /></label><label class="r_txt">请保存我这次的登录信息</label>
                  </span>
                  <span class="fr"><a href="#" style="color:#ff4e00;">忘记密码</a></span>
                </td>
              </tr>
              <tr height="60">
                <td>&nbsp;</td>
                <td><input type="submit" :value="loading ? '登录中...' : '登录'" class="log_btn" :disabled="loading" /></td>
              </tr>
            </tbody>
          </table>
        </form>
      </div>
    </div>
  </div>
  <!--End Login End--> 

</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      loginData: {
        username: '',
        password: '',
        rememberMe: false
      },
      loading: false
    }
  },
  methods: {
    async handleLogin() {
      // 基本验证
      if (!this.loginData.username.trim()) {
        this.$message.error('请输入用户名')
        return
      }
      // 密码验证
      if (!this.loginData.password.trim()) {
        this.$message.error('请输入密码')
        return
      }
      // 登录验证
      this.loading = true
      
      try {
        // 调用真实的登录API
        const { login } = await import('@/api/userApi')
        const res = await login({
          loginName: this.loginData.username,
          password: this.loginData.password
        })
      
        console.log('登录响应:', res)
      
        // 根据后端实际响应结构调整处理逻辑
        // 支持多种成功判断方式，特别适配当前后端返回格式
        const isSuccess = 
          (res && (res.code === 200 || res.code === 0)) ||  // 标准格式
          (res && res.success === true) ||                   // success字段格式
          (res && res.status === 'success') ||               // status字段格式
          (res && typeof res === 'string' && res.includes('success')) || // 字符串包含success
          (res && res.token && res.data)                     // 当前后端返回格式（包含token和data）
          
        if (isSuccess) {
          // 登录成功
          const isAdmin = this.loginData.username === 'admin'
        
          // 保存登录状态和token（如果后端返回了token）
          const userInfo = {
            username: this.loginData.username,
            isLoggedIn: true,
            isAdmin: isAdmin,
            // 保存用户详细信息
            userDetails: res.data,
            // 保存用户类型信息
            userType: res.data.type || 0
          }
          
          // 确保用户ID在userInfo对象的第一层
          if (res.data && res.data.id) {
            userInfo.id = res.data.id;
          }
        
          // 从当前后端格式中提取token
          let token = null;
          if (res.token) {
            token = res.token
          } else if (res.data && res.data.token) {
            token = res.data.token
          }
        
          // 如果获取到token，保存到localStorage
          if (token) {
            // 去除token前后的空格，防止Base64URL解析错误
            const cleanToken = token.trim()
            localStorage.setItem('token', cleanToken)
          }
        
          localStorage.setItem('userInfo', JSON.stringify(userInfo))
          // 保存用户类型到本地存储
          if (res.data && res.data.type) {
            localStorage.setItem('userType', res.data.type)
          }
        
          if (isAdmin) {
            this.$message.success('管理员登录成功！')
          } else {
            this.$message.success('登录成功！')
          }
        
          // 通知父组件登录成功
          this.$emit('login-success', userInfo)
        
          // 跳转到首页或来源页面
          const redirect = this.$route.query.redirect || '/'
          this.$router.push(redirect)
        } else {
          // 尝试从响应中获取错误信息
          let errorMessage = '登录失败'
          if (res && res.message) {
            errorMessage = res.message
          } else if (res && res.msg) {
            errorMessage = res.msg
          } else if (typeof res === 'string') {
            errorMessage = res
          }
          this.$message.error(errorMessage || '登录失败')
        }
      } catch (error) {
        console.error('登录错误:', error)
        // 检查错误响应中是否包含token信息
        if (error.response && error.response.data) {
          const errorData = error.response.data;
          // 即使是错误响应，也可能包含token信息
          if (errorData.token) {
            // 去除token前后的空格，防止Base64URL解析错误
            const cleanToken = errorData.token.trim();
            localStorage.setItem('token', cleanToken);
            this.$message.success('登录成功！');
            const redirect = this.$route.query.redirect || '/'
            this.$router.push(redirect)
            return;
          }
          
          // 尝试从错误响应中获取错误信息
          let errorMessage = '登录失败，请检查用户名和密码'
          if (errorData.message) {
            errorMessage = errorData.message
          } else if (errorData.msg) {
            errorMessage = errorData.msg
          } else if (typeof errorData === 'string') {
            errorMessage = errorData
          }
          this.$message.error(errorMessage)
        } else {
          this.$message.error('登录失败，请检查用户名和密码')
        }
      } finally {
        this.loading = false
      }
    }
  },
  mounted() {
    // 检查是否有保存的登录信息
    const savedUserInfo = localStorage.getItem('userInfo')
    if (savedUserInfo) {
      const userInfo = JSON.parse(savedUserInfo)
      this.loginData.username = userInfo.username
      this.loginData.rememberMe = true
    }
  }
}
</script>

<style scoped>
/* 完全按照原始HTML页面的样式结构 */

</style>